<template>
  <div class="app-container">
    <el-tabs v-model="activeTabName" @tab-click="handleTabClick">
      <el-tab-pane label="签收" name="sgin">
        <div class="filter-div">
          <el-input
            v-model="signQuery.storeId"
            placeholder="店铺ID"
            style="width: 160px;"
            class="filter-item"
            @keyup.enter.native="getNeedSignData"
          />
          <el-input
            v-model="signQuery.storeName"
            placeholder="店铺名"
            style="width: 160px;"
            class="filter-item"
            @keyup.enter.native="getNeedSignData"
          />
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="getNeedSignData"
          >
            搜索
          </el-button>
          <el-button :disabled="signing" type="primary" icon="el-icon-edit-outline" @click="signSelected">签收</el-button>
        </div>
        <el-table
          ref="table"
          v-loading="listLoading"
          border
          :data="needSignList"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          size="mini"
          max-height="500px"
          row-key="id"
          style="width: 100%;"
          @select="handleSelect"
          @select-all="handleSelectAll"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="商店ID" min-width="12%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.goods_id ? '-' : row.store_id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商店名称" min-width="13%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.goods_id ? '-' : row.store_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单号" prop="id" min-width="18%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.id == row.store_id ? '' : row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品ID" min-width="12%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.goods_id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="支付时间" min-width="16%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.pay_time }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="所属客户" min-width="13%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.user_name }}</span>
            </template>
          </el-table-column> -->
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="历史数据" name="history">
        <el-table
          v-loading="listLoading"
          border
          size="mini"
          :data="list"
          max-height="500px"
          style="width: 100%;"
        >
          <el-table-column type="index" align="center" />
          <el-table-column label="订单号" prop="id" min-width="18%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="签收时间" min-width="16%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.sign_time == "0" ? "-" : row.sign_time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="支付时间" min-width="16%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.pay_time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品ID" min-width="12%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.goods_id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商店ID" min-width="12%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.store_id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商店名称" min-width="13%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.store_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属客户" min-width="13%" align="center">
            <template slot-scope="{row}">
              <span>{{ row.user_name }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page-sizes="[10, 20, 30]"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="fetchHistoryList"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { listHistorySign, signinOne, signinList, listNeedSign } from '@/api/order'
import { parseTime } from '@/utils'
import { Message } from 'element-ui'
export default {
  name: 'Sign',
  components: { Pagination },
  data() {
    return {
      activeTabName: 'sgin',
      signing: false,
      listLoading: false,
      multipleSelection: [],
      total: 0,
      list: [],
      needSignList: [],
      signQuery: {
        storeId: '',
        storeName: ''
      },
      listQuery: {
        needSign: 0,
        page: 1,
        limit: 10
      }
    }
  },
  created() {
    this.getNeedSignData()
  },
  methods: {
    handleTabClick({ name }) {
      switch (name) {
        case 'history':
          this.fetchHistoryList()
          break
        case 'sgin':
          this.getNeedSignData()
          break
        default: break
      }
    },
    fetchHistoryList() {
      this.listLoading = true
      listHistorySign(this.listQuery).then(response => {
        this.list = response.data.list.map(item => {
          item.pay_time = parseTime(item.pay_time)
          item.sign_time = parseTime(item.sign_time)
          return item
        })
        this.total = response.data.total
        this.listLoading = false
      })
    },
    getNeedSignData() {
      listNeedSign(this.signQuery.storeId, this.listQuery.storeName).then(response => {
        const list = response.data.map(item => {
          item.time = item.pay_time
          item.pay_time = parseTime(item.pay_time)
          return item
        })
        const map = {}
        list.forEach(element => {
          const sList = map[element.store_id] ? map[element.store_id] : []
          sList.push(element)
          map[element.store_id] = sList
        })
        const sortList = []
        for (const key in map) {
          if (map.hasOwnProperty(key)) {
            const item = {
              store_id: map[key][0].store_id,
              store_name: map[key][0].store_name,
              id: map[key][0].store_id,
              children: map[key]
            }
            item.children = item.children.sort((a, b) => b.time - a.time)
            sortList.push(item)
          }
        }
        this.needSignList = sortList.sort((a, b) => a.id - b.id)
        this.listLoading = false
      })
    },
    handleSelect(selection, row) {
      if (selection.some(el => { return row.id === el.id })) {
        if (row.children) {
          row.children.map(j => {
            this.toggleSelection(j, true)
          })
        }
      } else {
        if (row.children) {
          row.children.map(j => {
            this.toggleSelection(j, false)
          })
        }
      }
    },
    handleSelectAll(selection) {
      const selectedIds = selection.map(item => item.id)
      const topLevelIds = this.needSignList.map(item => item.id)
      const isSelect = selectedIds.indexOf(topLevelIds[0]) > -1
      this.needSignList.forEach(item => {
        item.children.forEach(child => this.toggleSelection(child, isSelect))
      })
    },
    toggleSelection(row, select) {
      if (row) {
        this.$nextTick(() => {
          this.$refs.table && this.$refs.table.toggleRowSelection(row, select)
        })
      }
    },
    handleSelectionChange(val) { this.multipleSelection = val },
    signinOne(order) {
      signinOne(order.id).then(response => {
        Message.success('操作成功')
        // TODO 刷新数据
      })
    },
    signSelected() {
      if (this.multipleSelection.length === 0) {
        Message.warning('未选中任何数据')
      } else {
        const trueData = this.multipleSelection.filter(item => item.store_id !== item.id)
        signinList(trueData.map(i => i.id)).then(response => {
          Message.info('签收请求正在处理中...')
          this.signing = true
          setTimeout(() => {
            this.getNeedSignData()
            this.signing = false
          }, 10 * 1000)
        })
      }
    }
  }
}
</script>

<style scoped>
    .filter-div{
        padding-bottom: 20px;
    }
</style>

